<template>
  <div id="tablebox">
    <div class="hearder-search">
      <el-col :span="24" class="breadcrumb-container input-val-box">
        <div class="input-top">
          <el-input v-model="searchWord" placeholder="填写书名或者条形码"></el-input>
        </div>
        <el-button type="primary"><i class="el-icon-search"></i>搜索</el-button>
      </el-col>
      <el-col :span="24" class="breadcrumb-container button-line">
        <el-button type="primary" @click.native="addBook" size="small">添加记录</el-button>
        <el-button type="warning" size="small" @click="deleteAll('forbid')">禁止借阅</el-button>
        <el-button type="success" size="small" @click="deleteAll('resume')">恢复借阅</el-button>
        <el-button type="danger" @click="deleteAll('delete')" size="small">批量删除</el-button>
        <el-button type="primary" size="small">回收站</el-button>
        <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
      </el-col>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
                ref="multipleTable"
                :data="arryList"
                :stripe="tableStripe"
                :border="tableBorder"
                tooltip-effect="dark"
                style="width: 100%"
                :height="tableHeight"
                header-cell-class-name="table-text-c"
                cell-class-name="table-text-c"
                @selection-change="handleSelectionChange">
          <el-table-column
                  type="selection"
                  width="50">
          </el-table-column>
          <el-table-column
                  prop="tools_id"
                  label="教辅具名称">
          </el-table-column>
          <el-table-column
                  prop="create_time"
                  label="借出时间">
          </el-table-column>
          <el-table-column
                  prop="num"
                  label="借出数量"
                  width="100">
          </el-table-column>
          <el-table-column
                  prop="num"
                  label="状态"
                  width="70">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
              background
              layout="total, prev, pager, next"
              :total="pageTotal"
              :page-size="pageSize"
              @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <!--编辑界面-->
    <!--<div v-if="editForm">-->
    <el-dialog :title="tieleName" :visible.sync="editFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleClose">
      <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
        <el-form-item label="书名" prop="name">
          <el-input v-model="editForm.name" auto-complete="off" placeholder="填写书名"></el-input>
        </el-form-item>
        <el-form-item label="存放位置" prop="position">
          <el-input v-model="editForm.position" auto-complete="off" placeholder="填写存放位置"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="num">
          <el-input v-model="editForm.num" auto-complete="off" placeholder="填写库存"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio label="1" v-model="editForm.status">开启借阅</el-radio>
          <el-radio label="0" v-model="editForm.status">禁止借阅</el-radio>
        </el-form-item>
        <el-form-item label="作者" prop="editor">
          <el-input v-model="editForm.editor" auto-complete="off" placeholder="填写库存"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="press">
          <el-input v-model="editForm.press" auto-complete="off" placeholder="填写价格"></el-input>
        </el-form-item>
        <el-form-item label="条形码" prop="code">
          <el-input v-model="editForm.code" auto-complete="off" placeholder="填写条形码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="resetForm">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
    <!--</div>-->
    <!--删除咨询框-->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
      <span>你确定删除这本图书: <span class="bookname">{{bookName}}</span></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="DetelBook()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableStripe: true, // 是否斑马栏
        tableBorder: true, // 单元格右边边框
        searchWord: '', // 搜索名称
        editLoading: false, // 编辑界面按键缓存
        editForm: {
          code: '',
          created: '',
          editor: '',
          isdelete: '',
          name: '',
          position: '',
          press: '',
          status: '1',
          updated: ''
        }, // 编辑界面数据
        editFormRules: {
          name: [
            {required: true, message: '请填写书名', trigger: 'blur'}
          ],
          position: [
            {required: true, message: '请填写图书存放位置', trigger: 'blur'}
          ],
          num: [
            {required: true, message: '请填写库存', trigger: 'blur'}
          ],
          created: [
            { required: true, message: '请选择添加时间', trigger: 'change' }
          ],
          updated: [
            { required: true, message: '请选择编辑时间', trigger: 'change' }
          ],
          editor: [
            {required: true, message: '请填写作者', trigger: 'blur'}
          ],
          press: [
            {required: true, message: '请填写价格', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '请填写条形码', trigger: 'blur'}
          ]
        }, // 表单验证不能为空规则
        addLoading: false,
        editFormVisible: false, // 编辑界面是否显示
        arryList: null, // 数据列表
        pageTotal: 0, // 总页数
        dialogVisible: false, // 删除咨询页
        bookName: '', // 删除书名
        bookEtelId: '', // 删除书名id
        tieleName: '',
        tableHeight: 450,
        page: 1,
        pageSize: 20,
        handleSelection: null // checked选中框
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      // 初始化
      InitFn () {
        console.log('获取通讯信息')
        this.$fetch('tools/myTools', {p: this.page}).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            this.arryList = response.list.data
            this.pageTotal = response.list.total
            this.tableHeight = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 200
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 分页
      handleSizeChange (val) {
        this.page = val
        console.log(val)
        this.InitFn()
      },
      handleSelectionChange (val) {
        console.log(val) // 所有选中值
        this.handleSelection = val
      },
      // 批量删除 禁用 恢复
      deleteAll (option) {
        console.log('批量删除数据')
        let id_ = []
        this.handleSelection.forEach((item, index) => {
          id_.push(item.id)
        })
        console.log('提交的id', id_.join(','))
        // book/forbid/id/ 禁用
        // book/resume/id/ 恢复
        // delete book/delete 删除
        let url_ = '' // 恢复
        let message = ''
        let _self = this
        if (option === 'forbid') {
          url_ = 'book/forbid' // 禁用
          message = '禁用成功'
        } else if (option === 'resume') {
          url_ = 'book/resume' // 恢复
          message = '恢复成功'
        } else if (option === 'delete') {
          url_ = 'book/delete' // 恢复
          message = '删除成功'
        }
        this.$post(url_, {id: id_.join(',')}).then((response) => {
          console.log(response)
          if (response.code === 0) {
            this.InitFn()
            _self.$message({
              message: message,
              type: 'success'
            })
            _self.InitFn()
          } else {
            console.log('请求失败')
          }
        }).catch((err) => {
          console.log(err)
        })
        // console.log(this.$refs.multipleTable.toggleRowSelection())
      },
      // 删除
      handleDetel (index, row) {
        console.log('编辑数据index', index)
        console.log('编辑数据row', row)
        this.bookName = row.name
        this.bookEtelId = row.id
        this.dialogVisible = true
      },
      // 禁止恢复借阅
      openBorrwBook (index, row) {
        console.log('序列号index', index)
        console.log('数据row', row)
        //  book/forbid 禁用
        // status 0可以恢复 1可以禁用
        // book/forbid/id/ 禁用
        // book/resume/id/ 恢复
        let url_ = 'book/resume' // 恢复
        let message = '恢复成功'
        let _self = this
        let status = 1
        if (row.status === 1) {
          url_ = 'book/forbid' // 禁用
          message = '禁用成功'
          status = 0
        }
        this.$post(url_, {id: row.id}).then((response) => {
          console.log(response)
          if (response.code === 0) {
            this.InitFn()
            _self.$message({
              message: message,
              type: 'success'
            })
            _self.arryList[index].status = status
          } else {
            console.log('请求失败')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 确认删除图书
      DetelBook () {
        let _self = this
        this.$post('book/delete', {id: this.bookEtelId}).then((response) => {
          console.log(response)
          if (response.code === 0) {
            this.InitFn()
            _self.$message({
              message: '删除成功',
              type: 'success'
            })
            _self.dialogVisible = false
          } else {
            console.log('请求失败')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 添加图书
      addBook () {
        this.editForm = {
          code: '',
          created: '',
          editor: '',
          isdelete: '',
          name: '',
          position: '',
          press: '',
          status: '1',
          updated: ''
        } // 编辑界面数据
        this.editFormVisible = true
        this.tieleName = '添加'
      },
      // 编辑
      handleEdit (index, row) {
        console.log('编辑数据index', index)
        console.log('编辑数据row', row)
        this.tieleName = '编辑'
        row.status = row.status.toString()
        this.editForm = row
        this.editFormVisible = true
      },
      // 提交数据
      editSubmit () {
        // 验证信息
        let _self = this
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            console.log('提交信息')
            _self.submitBook()
            console.log('提交数据data', _self.editForm)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 提交新增，编辑书籍
      submitBook () {
        // 判断新增 编辑
        let _self = this
        let url_ = 'book/add'
        let message = '添加成功'
        // 判断 tieleName添加，编辑
        // book/edit/id/707
        if (this.tieleName === '编辑') {
          url_ = 'book/edit/id/' + this.editForm.id
          message = '编辑成功'
        }
        this.$post(url_, this.editForm).then((response) => {
          console.log(response)
          if (response.code === 0) {
            if (_self.page === 1) {
              _self.InitFn()
            }
            if (this.tieleName === '编辑') {
              _self.InitFn()
            }
            _self.$message({
              message: message,
              type: 'success'
            })
            _self.editFormVisible = false
            _self.$refs['editForm'].resetFields()
          } else {
            console.log('请求失败')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 重置验证
      resetForm () {
        console.log('取消')
        this.editFormVisible = false
        this.$refs['editForm'].resetFields()
      },
      handleClose (done) {
        done()
        this.$refs['editForm'].resetFields()
      },
      // 刷新页面
      refreshFn () {
        this.InitFn()
      }
    },
    mounted () {
      console.log('表格距离浏览器可用高度顶部的距离', this.$refs.multipleTable.$el.offsetTop)
      console.log('计算table高度：', window.innerHeight - this.$refs.multipleTable.$el.offsetTop)
      // this.tableHeight = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 110
      // this.clientHeight = document.body.clientHeight
      const _this = this
      window.onresize = function temp () {
        console.log('屏幕高度')
        _this.tableHeight = window.innerHeight - _this.$refs.multipleTable.$el.offsetTop - 200
      }
    }
  }
</script>

<style lang="scss">
  #tablebox {
    display: flex;
    flex-direction: column;
  }
  .el-table{
    color:#000;
  }
  .right-box .container .main .content-container .input-val-box .input-top{
    width: 250px;
  }
</style>
